<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
			/* max-width: 800px;直接意思：
			*  "这个元素的最大宽度不能超过800像素"
			*  实际效果：
			*  当屏幕/窗口宽度 ≤ 800px 时：
			*  元素宽度会跟随屏幕宽度变化（100%宽度）
			*  比如在手机上看（假设屏幕375px宽），元素就是375px宽
			*  当屏幕/窗口宽度 > 800px 时：
			*  元素会保持800px宽，不再继续变大
			*  多余的空间会自动平均分配到两侧（居中显示） */
            max-width: 800px;
            margin: 0 auto;
        }
        
        /* 标签按钮的默认样式 */
        .tab-button {
            padding: 10px 20px;
            background: #f1f1f1;
            display: inline-block;
            margin-right: 5px;
            cursor: pointer;
        }
        
        /* 被选中的标签按钮样式 */
        .tab-button-selected {
            background: #4CAF50;
            color: white;
        }
        
        /* 内容区域的默认样式（隐藏） */
        .tab-content {
            display: none;
            padding: 20px;
            border: 1px solid #ddd;
            margin-top: -1px;
        }
        
        /* 被选中的内容区域样式（显示） */
        .tab-content-selected {
            display: block;
        }
    </style>
</head>
<body>
    <h1>国情灵616运动鞋</h1>
    <p>¥299</p>
    
    <img src="../images/xiezi.jpg" style="width:100%;max-width:600px;">
    
    <!-- 标签按钮区域 -->
    <div>
        <div class="tab-button-selected" onclick="selectTab(0)">商品详情</div>
        <div class="tab-button" onclick="selectTab(1)">商品评价</div>
        <div class="tab-button" onclick="selectTab(2)">规格参数</div>
    </div>
    
    <!-- 内容区域 -->
    <div class="tab-content-selected">
        <h2>商品详情</h2>
        <p>透气网布鞋面，高弹性EVA中底，耐磨橡胶大底，适合日常运动和休闲穿着。</p>
    </div>
    
    <div class="tab-content">
        <h2>商品评价</h2>
        <p>"非常舒适，透气性好！" - 张三</p>
        <p>"尺码标准，性价比高" - 李四</p>
    </div>
    
    <div class="tab-content">
        <h2>规格参数</h2>
        <p>材质：网布+橡胶</p>
        <p>尺码：36-44</p>
        <p>颜色：黑/白/蓝</p>
    </div>

    <script>
        // 切换标签页的函数
        function selectTab(tabIndex) {
            // 1. 获取所有标签按钮
            var buttons = document.getElementsByClassName('tab-button');
            var selectedButtons = document.getElementsByClassName('tab-button-selected');
            
            // 2. 获取所有内容区域
            var contents = document.getElementsByClassName('tab-content');
            var selectedContents = document.getElementsByClassName('tab-content-selected');
            
            // 3. 重置所有已选中的按钮和内容（先全部取消选中）
            for(var i = 0; i < selectedButtons.length; i++) {
                selectedButtons[i].className = 'tab-button';
            }
            for(var i = 0; i < selectedContents.length; i++) {
                selectedContents[i].className = 'tab-content';
            }
            
            // 4. 设置当前选中的按钮
            buttons[tabIndex].className = 'tab-button-selected';
            
            // 5. 设置当前选中的内容
            contents[tabIndex].className = 'tab-content-selected';
        }
    </script>
</body>
</html>